<template>
    <div class="ranking">
        <category-header><span>排行榜</span></category-header>
        <div class="ranking-box">
            <div class="rangking-left">
                <ul>
                    <li :class="rankIndex == item.rankType ? 'active' : ''" v-for="(item, index) in rankNaviList" :key="index" @click="getRankName(item.rankType)">{{ item.name }}</li>
                </ul>
            </div>
            <div class="rangking-right">
                <div class="rangking-con" v-for="(item, index) in rankingList" :key="item.id" @click="gotoDetail(item.id, item.title)">
                    <div class="img-box">
                        <img :src="item.cover" alt="" />
                    </div>
                    <div class="book-detail">
                        <div class="book-name">
                            <p>{{ item.title }}</p>
                            <span>{{ (index + 1) | num }}</span>
                        </div>
                        <div class="book-con">{{ item.content }}</div>
                        <div class="book-type">
                            <span>{{ item.author }}</span>
                            <span>{{ item.category }}</span>
                            <span v-if="item.clickCount != -1" style="color: red">{{ item.clickCount | hot }}人气</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { rankList } from "@/api/found";
import CategoryHeader from "@/components/category-header.vue";
export default {
    data() {
        // url: "/store/rankList.json?rankType=34&uuid=ca03da7b64ca443ab25ec3b662fa91e2&all=0",
        return {
            rankNaviList: [
                {
                    name: "人气榜",
                    rankType: 34,
                },
                {
                    name: "畅销榜",
                    rankType: 26,
                },
                {
                    name: "新书榜",
                    rankType: 800,
                },
                {
                    name: "免费榜",
                    rankType: 804,
                },
                {
                    name: "完结榜",
                    rankType: 806,
                },
            ],
            rankingList: [],
            rankIndex: 34,
        };
    },
    filters: {
        hot(value) {
            if (value < 10000) {
                return value;
            }
            return (value / 10000).toFixed(1) + "万";
        },
        num(value) {
            if (value < 4) {
                return "NO." + value;
            }
            return value;
        },
    },
    methods: {
        getRankList() {
            let data = {
                rankType: 34,
                uuid: "ca03da7b64ca443ab25ec3b662fa91e2",
                all: 0,
            };
            rankList({ data }).then((res) => {
                console.log(res);
                let result = res.list;
                this.rankingList = result;
            });
        },
        getRankName(type) {
            this.rankIndex = type;
            let data = {
                rankType: type,
                uuid: "ca03da7b64ca443ab25ec3b662fa91e2",
                all: 0,
            };
            rankList({ data }).then((res) => {
                console.log(res);
                let result = res.list;
                this.rankingList = result;
            });
        },
        gotoDetail(id, title) {
            this.$router.push({
                path: "/detail",
                query: {
                    id,
                    title,
                },
            });
        },
    },
    created() {
        this.getRankList();
    },
    components: {
        CategoryHeader,
    },
};
</script>

<style lang="scss" scoped>
.ranking {
    width: 100%;
    padding: 0 15px;
    .ranking-box {
        position: relative;
        width: 100%;
        border-top: 1px solid #f0f0f0;
        display: flex;
    }
    .rangking-left {
        // border: 1px solid #000;
        width: 20%;
        // position: fixed;
        // top: 0;
        // left: 0;
        li {
            position: relative;
            text-align: center;
            padding: 15px 0;
            font-size: 14px;
            color: #999;
        }
        .active {
            color: #e0c9a0;

            &::after {
                content: "";
                position: absolute;
                top: 45%;
                right: 5px;
                transform: rotate(45deg);
                display: block;
                width: 5px;
                height: 5px;
                border: 1px solid #e0c9a0;
                border-left-color: transparent;
                border-bottom-color: transparent;
            }
        }
    }
    .rangking-right {
        // border: 1px solid #000;
        border-left: 1px solid #f0f0f0;
        width: 80%;
        // height: 400px;
        padding: 5px 0 0 5px;
    }
    .rangking-con {
        width: 100%;
        display: flex;
        padding-bottom: 10px;
        .img-box {
            width: 20%;
            img {
                width: 100%;
            }
        }

        .book-detail {
            padding-left: 10px;
            width: 80%;
            .book-name {
                font-size: 14px;
                color: #313131;
                display: flex;
                align-items: flex-end;

                span {
                    flex: 1;
                    text-align: right;
                    color: #999;
                    font-size: 12px;
                }
            }
            .book-con {
                font-size: 12px;
                color: #999;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 10px 0;
            }
            .book-type {
                font-size: 12px;
                color: #999;
                display: flex;
                span {
                    padding-right: 10px;

                    &:nth-of-type(3) {
                        flex: 1;
                        padding: 0;
                        text-align: right;
                    }
                }
            }
        }
    }
}
</style>
